<template>
  <el-row type="flex" justify="center" align="middle">
    <el-col>
      <el-form label-width="80px">
        <el-form-item :label="initData.dataNavInfo[0].name || ''">
          <picture-wall ref="imagesServe" :limit="limit"></picture-wall>
        </el-form-item>
        <el-form-item :label="initData.dataNavInfo[1].name || ''">
          <picture-wall ref="imagesShow" :limit="limit"></picture-wall>
        </el-form-item>
        <el-form-item :label="initData.dataNavInfo[2].name || ''">
          <picture-wall ref="imagesAbout" :limit="limit"></picture-wall>
        </el-form-item>
        <el-form-item :label="initData.dataNavInfo[3].name || ''">
          <picture-wall ref="imagesAsk" :limit="limit"></picture-wall>
        </el-form-item>
        <el-form-item :label="initData.dataNavInfo[4].name || ''">
          <picture-wall ref="imagesContactUs" :limit="limit"></picture-wall>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-button type="primary" @click="onSubmit()">提交</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import { MessageBox, Message } from "element-ui";
import { reqNavInfo } from "@/apis/Category";
import { reqImagesOfTitles, reqUpdateImagesOfTitles } from "@/apis/Go";
import PictureWall from "@/components/PictureWall.vue";
import { getReqDataNew } from "@/utils/http";
import {
  successDataType,
  failDataType,
  categoryType,
  goDataType
} from "CustomTypes";
import { isEqual, isUndefined } from "lodash";
import { getImgsTempUrl } from "@/utils/cloud";

@Component({
  name: "Go",
  components: { PictureWall }
})
export default class Go extends Vue {
  private limit = 1;
  private initData: goDataType = {
    imagesServe: [],
    imagesShow: [],
    imagesAbout: [],
    imagesAsk: [],
    imagesContactUs: [],
    dataNavInfo: [
      { name: "", image: "" },
      { name: "", image: "" },
      { name: "", image: "" },
      { name: "", image: "" },
      { name: "", image: "" }
    ]
  };
  @Ref("imagesServe")
  private pwServe!: PictureWall;
  @Ref("imagesShow")
  private pwShow!: PictureWall;
  @Ref("imagesAbout")
  private pwAbout!: PictureWall;
  @Ref("imagesAsk")
  private pwAsk!: PictureWall;
  @Ref("imagesContactUs")
  private pwContactUs!: PictureWall;

  private async getTempUrl(urls: Array<string>) {
    const { fileList } = await getImgsTempUrl(urls);
    return fileList.map((file: any) => ({
      name: file.name,
      url: file.url
    }));
  }

  async init() {
    const results = await Promise.all([reqImagesOfTitles(), reqNavInfo()]);
    const { flag: flagImgOfTitles, data: dataImgOfTitles } = getReqDataNew(
      results[0]
    );
    const {
      flag: flagNavInfo,
      data: { data: dataNavInfo }
    } = getReqDataNew(results[1]);

    if (flagImgOfTitles && flagNavInfo) {
      const tempData = (dataImgOfTitles as successDataType).data;
      const {
        images_serve: imagesServe,
        images_show: imagesShow,
        images_about: imagesAbout,
        images_ask: imagesAsk,
        images_contact_us: imagesContactUs
      } = tempData[0];

      this.initData = {
        imagesServe,
        imagesShow,
        imagesAbout,
        imagesAsk,
        imagesContactUs,
        dataNavInfo
      };

      // tempUrl图片地址是一组数组，有可能是云存储地址，需要转化为临时下载地址。
      this.pwServe.fileList = await this.getTempUrl(imagesServe);
      this.pwShow.fileList = await this.getTempUrl(imagesShow);
      this.pwAbout.fileList = await this.getTempUrl(imagesAbout);
      this.pwAsk.fileList = await this.getTempUrl(imagesAsk);
      this.pwContactUs.fileList = await this.getTempUrl(imagesContactUs);
      return;
    }

    const errMsg1 = (dataImgOfTitles as failDataType).msg;
    const errMsg2 = (dataNavInfo as failDataType).msg;
    MessageBox.alert(`${errMsg1}_${errMsg2}`, {
      confirmButtonText: "确定",
      type: "error"
    });
  }

  async onSubmit() {
    let data: any;
    if (this.pwServe.hasOptions) data.imagesServe = this.pwServe.fileListSubmit;
    if (this.pwShow.hasOptions) data.imagesShow = this.pwShow.fileListSubmit;
    if (this.pwAbout.hasOptions) data.imagesAbout = this.pwAbout.fileListSubmit;
    if (this.pwAsk.hasOptions) data.imagesAsk = this.pwAsk.fileListSubmit;
    if (this.pwContactUs.hasOptions)
      data.imagesContactUs = this.pwContactUs.fileListSubmit;
    if ({} === data) {
      Message.warning("没有上传所有的图片或没有新的修改，不予提交。");
      return null;
    }

    const result = await reqUpdateImagesOfTitles(data);
    const { flag, data: resultData } = getReqDataNew(result);

    if (flag) {
      //得到数据 (data as successDataType).data;

      return;
    }

    MessageBox.alert((data as failDataType).msg, {
      confirmButtonText: "确定",
      type: "error"
    });
  }

  mounted() {
    this.init();
  }
}
</script>
<style>
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 50px;
  line-height: 50px;
  text-align: left;
}
</style>
